<template>
  <div class="base-container">
    <div class="left-container">
      <leftContainer />
    </div>
    <div class="middle-container"></div>
    <div class="right-container">123</div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import leftContainer from './left-container.vue'
const previewRef = ref(false); // 预览的时候，内容不能在操作了，可以点击
const editorRef = ref(true); // 编辑状态
const props = defineProps({
  state: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update:state"]);

const data = computed({
  get: () => props.state,
  set: (newVal) => emit("update:state", newVal),
});

const containerStyle = computed(() => {
  return {
    width: data.value.container.width + "px",
    height: data.value.container.height + "px",
  };
});

const containerRef = ref(null);
</script>

<style lang="scss" scoped>
.base-container {
  width: 100vw;
  display: flex;
  .left-container {
    padding: 6px 20px;
    flex-basis: 240px;
    border: 1px solid #ccc;
  }
  .middle-container {
    flex: 5;
    border: 1px solid #ccc;
  }
  .right-container {
    flex: 1;
    flex-basis: 120px;
    border: 1px solid #ccc;
  }
}
</style>
